<template>
<div>
	<h2 class="intro-title">Container 布局容器</h2>
	<p class="intro-content">用于布局的容器组件，方便快速搭建页面的基本结构：</p>
	<p><code>&lt;bh-container&gt;</code>：外层容器。当子元素中包含 <code>&lt;bh-header&gt;</code> 或 <code>&lt;bh-footer&gt;</code> 时，全部子元素会垂直上下排列，否则会水平左右排列。</p>

	<demo01></demo01>

	<h3 class="base-title">Container Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list1' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>

	<h3 class="base-title">Header Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list2' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>

	<h3 class="base-title">Aside Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list3' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>

	<h3 class="base-title">Footer Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list4' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

<script>
import demo01 from './demo01.vue'

const list1 = [{
	val1: 'direction',
	val2: '子元素的排列方向',
	val3: 'string',
	val4: 'horizontal / vertical',
	val5: '子元素中有 bh-header 或 bh-footer 时为 vertical，否则为 horizontal',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});
const list2 = [{
	val1: 'height',
	val2: '顶栏高度',
	val3: 'string',
	val4: '--',
	val5: '60px',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});
const list3 = [{
	val1: 'height',
	val2: '顶栏高度',
	val3: 'string',
	val4: '--',
	val5: '60px',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});
const list4 = [{
	val1: 'height',
	val2: '顶栏高度',
	val3: 'string',
	val4: '--',
	val5: '60px',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

export default {
	components: {
		'demo01': demo01,
	},
	data () {
		return {
			list1: list1,
			list2: list2,
			list3: list3,
			list4: list4,
		};
	},
}
</script>

<style scoped>
</style>
